<template>
  <el-tabs v-model="activeName" type="card" class="tabbedPanel">
    <el-tab-pane label="属性" name="objectTab" class="panel">
      <ObjectTab></ObjectTab>
    </el-tab-pane>
    <el-tab-pane
      v-if="activeShallowRef.type === 'Mesh'"
      label="几何组件"
      name="geometryTab"
      class="panel"
    >
      <GeometryTab></GeometryTab>
    </el-tab-pane>
    <el-tab-pane
      v-if="activeShallowRef.type === 'Mesh'"
      label="材质组件"
      name="materialTab"
      class="panel"
    >
      <MaterialTab></MaterialTab>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import { ref, type Ref } from 'vue'
import ObjectTab from './activeObjectTabs/object.vue'
import GeometryTab from './activeObjectTabs/geometry.vue'
import MaterialTab from './activeObjectTabs/material.vue'
import { useActiveObject } from '@renderer/stores/activeObject'
import { storeToRefs } from 'pinia'
import { Mesh, Object3D } from 'three'

const activeObjectStore = useActiveObject()
const { activeShallowRef }: { activeShallowRef: Ref<Object3D | Mesh> } =
  storeToRefs(activeObjectStore)

const activeName = ref('objectTab')
</script>
<style lang="scss" scoped>
::v-deep(.el-tabs__header) {
  margin: 0px;
}
.tabbedPanel {
  margin-top: 10px;
  flex: 1;
  overflow: hidden;
  .panel {
    height: 100%;
    padding: 0 10px 10px 10px;
    overflow: auto;
    box-sizing: border-box;
  }
}
</style>
